<template>
  <div class="container column-center">
    <div class="round"></div>
  </div>
</template>

<script>
    export default {
        name: "animation",
        mounted() {
        }
    }
</script>

<style scoped>
  .container {
    background: white;
  }

  .round {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    animation: ani_round 0.5s forwards;
  }

  @keyframes ani_round {
    from {
      background: red;
    }
    to {
      background: yellow;
      -webkit-transform: rotate(-360deg);

    }
  }
</style>
